<template>
	<view>
		<!-- 顶部标题的背景色 -->
		<view class="news_nav_bar" :style="{height: navBarHeight+'px'}"></view>
		
		<u-navbar
			:title="navBarTitle"
			leftIconColor="#ffffff"
			bgColor="rgba(255,255,255,0)"
			:titleStyle="{color: '#ffffff'}"
			leftIcon="list"
			fixed
			@leftClick="classifyVisChange"
		/>
		<view class="index_search">
			<u-search 
				placeholder="请输入搜索关键词" 
				v-model="keyword" 
				@search="searchSubmit" 
				@custom="searchSubmit" 
				shape="square"
			/>
		</view>
		
		<uni-list-view
			:height="scrollHeight"
			url="labor/labor/mian/findPage"
			requestMethod="GET"
			@loadData="loadData"
		>
			<view class="news_item" v-for="(item, index) in newsList" :key="index" @click="routeDetail(item)">
				<view class="_title">每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值</view>
				<view class="_des">高斯模糊效果会占用一定的计算资源，因此在实际应用中需要进行优化，以提高页面的性能</view>
				<view class="_img_box">
					<!-- 最多展示3个， 三个用 _img3, 两个用 _img2 -->
					<image class="_img2" v-for="(img, i) in 2" :key="i" mode="aspectFill" src="https://img2.baidu.com/it/u=4134404395,864195599&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"></image>
				</view>
			</view>
		</uni-list-view>
		
		<!-- 选择分类 -->
		<u-popup
			:show="classifyVisible"
			:round="10" 
			mode="bottom"
			closeOnClickOverlay
			closeable
			@close="classifyVisChange"
		>
			<view class="classify_list">
				<view 
					class="_item" 
					@click="changeClassify(item, index)" 
					v-for="(item, index) in classifyList" 
					:key="index"
					:class="{'_active': index===classifyIndex}"
				>{{item.name}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import UniListView from "@/components/uni-list-view/index.vue" 
	export default {
		data() {
			return {
				navBarHeight: 0, // 导航栏的高度
				navBarTitle: '资讯',
				keyword: '',
				scrollHeight: 0,
				newsList: [],
				classifyVisible: false, // 分类弹窗隐藏显示
				classifyList: [
					{name: '要闻',id: '0'},
					{name: '热点',id: '1'},
					{name: '昆明',id: '2'},
					{name: '漫画',id: '3'},
					{name: '图片',id: '4'},
					{name: '政治',id: '5'},
					{name: '国际',id: '6'},
					{name: '国内',id: '7'},
					{name: '视频',id: '8'},
					{name: '军事',id: '9'},
				],
				classifyIndex: -1
			}
		},
		components: {
			UniListView
		},
		onLoad() {
			this.getScrollHeight();
			this.getNavBarHeight();
		},
		methods: {
			async getNavBarHeight() {
				let sysInfo =  await uni.getSystemInfoAsync()
				this.navBarHeight = sysInfo.statusBarHeight + 44 ;
			},
			
			// 搜索
			searchSubmit() {
				console.log('搜索', this.keyword);
			},
			
			// 打开分类
			classifyVisChange() {
				this.classifyVisible = !this.classifyVisible
			},
			
			// 选择分类
			changeClassify(item, index) {
				this.classifyVisible = false;
				// 设置头部title
				this.navBarTitle = '资讯 - ' + item.name;
				this.classifyIndex = index;
				console.log(item.id);
			},
			
			// 计算滚动条的高度
			async getScrollHeight() {
				let sysInfo = await uni.getSystemInfoAsync();
				uni.createSelectorQuery().in(this).select('.index_search').boundingClientRect(rect=>{
					this.scrollHeight = sysInfo.windowHeight - sysInfo.statusBarHeight - 44 - rect.height
				}).exec()
			},
			
			// 加载新闻资讯数据
			loadData(list) {
				this.newsList = list;
			},
			
			// 跳转详情
			routeDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/news/detail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news_nav_bar{
		background: linear-gradient(to right, #ff4a0f, #ff0036);
	}
	
	.index_search{
		background: #fff;
		padding: 20rpx 20rpx 0 30rpx;
	}
	.news_item{
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
		background: #fff;
		._title{
			font-weight: bold;
			padding: 0 30rpx;
			font-size: 32rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-bottom: 10rpx;
		}
		._des{
			color: #999;
			font-size: 26rpx;
			padding: 0 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-bottom: 10rpx;
		}
		._img_box{
			display: flex;
			flex-wrap: wrap;
			padding: 0 0 0 15rpx;
			._img3{
				width: 220rpx;
				height: 140rpx;
				margin-left: 15rpx;
				margin-top: 15rpx;
			}
			._img2{
				width: 330rpx;
				height: 185rpx;
				margin-left: 15rpx;
				margin-top: 15rpx;
			}
		}
	}
	
	.classify_list{
		padding: 50rpx 1rpx 1rpx 1rpx;
		display: flex;
		flex-wrap: wrap;
		._item{
			padding: 18rpx 34rpx;
			border: 1rpx solid #bbb;
			border-radius: 4rpx;
			margin-left: 30rpx;
			margin-bottom: 30rpx;
			&._active{
				background: #ff0036;
				color: #fff;
				border-color: #ff0036;
			}
		}
	}
</style>
